<template>
  <div class="view-container">
    <el-form :model="queryParam" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker type="datetime" v-model="queryParam.startTime" placeholder="开始时间"
                            class="width-control"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker type="datetime" v-model="queryParam.endTime" placeholder="结束时间"
                            class="width-control"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="调度结果" prop="dispatchResult">
            <el-select v-model="queryParam.dispatchResult" placeholder="请选择调度结果" :show-search="true"
                       :allow-clear="true" class="width-control">
              <el-option v-for="item in dictValue.success_or_not" :value="item.dictKey"
                         :label="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="执行结果" prop="executeResult">
            <el-select v-model="queryParam.executeResult" placeholder="请选择执行结果" :show-search="true"
                       :allow-clear="true" class="width-control">
              <el-option v-for="item in dictValue.success_or_not" :value="item.dictKey"
                         :label="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :data="tableData" :columns="columns" header-row-class-name="header-row-class" size="default" border
                  :total="rowsTotal" :default-page-size="10" show-overflow-tooltip @change="changePage">
      <template #dispatchResult="scope">
        <dict-tag :options="dictValue.success_or_not" :values="scope.row.dispatchResult"></dict-tag>
      </template>
      <template #executeResult="scope">
        <dict-tag :options="dictValue.success_or_not" :values="scope.row.executeResult"></dict-tag>
      </template>
    </nebula-table>
  </div>
</template>
<script setup>
import {getDict} from "@/util/dict.js";
import {getDetailTableData} from "@/api/sysTask.js";
import {useRoute} from "vue-router";
import DictTag from "@/components/DictTag.vue";
import NebulaTable from "@/components/NebulaTable.vue";

defineOptions({
  name: "taskDetail",
})

const dicts = ["success_or_not"];

const route = useRoute()
const queryParam = ref({
  startTime: "",
  endTime: "",
  dispatchResult: "",
  executeResult: "",
  jobId: route.params.taskId,
  pageNum: 1,
  pageSize: 10
})

const dictValue = ref({})
const rowsTotal = ref(0)
const tableData = ref([])
const page = reactive({
  current: queryParam.value.pageNum,
  limit: queryParam.value.pageSize,
  total: rowsTotal,
  layout: ["prev", "page", "next", "limits", "count"],
});

const columns = [
  {title: "调度时间", key: "executeTime", align: 'center', width: '250'},
  {title: "执行器", key: "jobHandler", align: 'center', width: '150'},
  {title: "调度结果", key: "dispatchResult", align: 'center', customSlot: 'dispatchResult', width: '100'},
  {title: "执行结果", key: "executeResult", align: 'center', customSlot: 'executeResult', width: '100'},
  {title: "调度错误信息", key: "dispatchErrorReason", align: 'center', ellipsisTooltip: true},
  {title: "执行错误信息", key: "executeErrorReason", align: 'center', ellipsisTooltip: true},
]

const handleQuery = () => {
  getDetailTableData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}

const resetParams = () => {
  for (let key in queryParam.value) {
    if (key !== "pageNum" && key !== "pageSize" && key !== 'jobId') {
      queryParam.value[key] = null;
    }
  }
}

onMounted(() => {
  dictValue.value = getDict({type: {dicts}})
  handleQuery()
})

</script>
